<!DOCTYPE html>
<html lang="en">

<head>
<link rel="shortcut icon" href="images/favicon.php" />
<meta charset="UTF-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Queen Hotel</title>
<!-- ////////////////////////////////// -->
<!-- //      Start Stylesheets       // -->
<!-- ////////////////////////////////// -->
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<link href="styles/color.css" rel="stylesheet" type="text/css" />
<link href="styles/inner.css" rel="stylesheet" type="text/css" />

<!-- ////////////////////////////////// -->
<!-- //      Javascript Files        // -->
<!-- ////////////////////////////////// -->
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

<script type="text/javascript" src="js/hoverIntent.js"></script> 
<script type="text/javascript" src="js/superfish.js"></script> 
<script type="text/javascript" src="js/supersubs.js"></script>

<script type="text/javascript">
jQuery(document).ready(function(){

	//Menu
	jQuery("ul.sf-menu").supersubs({ 
	minWidth		: 12,		// requires em unit.
	maxWidth		: 14,		// requires em unit.
	extraWidth		: 3	// extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
						   // due to slight rounding differences and font-family 
	}).superfish();  // call supersubs first, then superfish, so that subs are 
					 // not display:none when measuring. Call before initialising 
					 // containing tabs for same reason. 
   //jQuery tab
	jQuery(".tab-content").hide(); //Hide all content
	jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab
	jQuery(".tab-content:first").show(); //Show first tab content
	//On Click Event
	jQuery("ul.tabs li").click(function() {
		jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class
		jQuery(this).addClass("active"); //Add "active" class to selected tab
		jQuery(".tab-content").hide(); //Hide all tab content
		var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		jQuery(activeTab).fadeIn(200); //Fade in the active content
		return false;
	});
	
	//jQuery toggle
	jQuery(".toggle_container").hide();
	jQuery("h2.trigger").click(function(){
		jQuery(this).toggleClass("active").next().slideToggle("slow");
	});

});
</script>
</head>
<body>

<div id="outer-container">
		
        <div id="wrapper-header">
        <div class="container">
            <div id="header">
                <div id="logo">
                	<span class="logo-l"></span>
                    <a href="index.php"><img src="images/logo.png" alt=""  /></a>
                    <span class="logo-r"></span>
                </div><!-- end logo -->
                <div class="clear"></div>
                
                <div id="nav-container">
                <div id="nav-main">
                    <div id="nav">
                        <ul id="topnav" class="sf-menu">
                            <li><a href="index.php">Home</a></li>
                            <li><a href="#">Rooms</a>
                                <ul>
                                    <li><a href="indo1.php">Indonesian Hotels 1</a></li>
                                    <li><a href="indo2.php">Indonesian Hotels 2</a></li>
                                    <li><a href="indo3.php">Indonesian Hotels 3</a></li>
                                    <li><a href="indo4.php">Indonesian Hotels 4</a></li>
                                    <li><a href="indo5.php">Indonesian Hotels 5</a></li>
                                    <li><a href="indo6.php">Indonesian Hotels 6</a></li>
                                    <li><a href="indo7.php">Indonesian Hotels 7</a></li>
                                    
                                </ul>
                            </li>
                            <li><a href="reservation.php">Reservations</a></li>
                            <li><a href="facilities.php">Facilities</a></li>
                            <li><a href="gallery.php">Gallery</a></li>                 
                            <li><a href="about.php">About</a></li>                 
							<li><a href="contact.php">Contact</a></li>
                    </ul><!-- end topnav -->
                    </div><!-- end nav -->	
                </div><!-- end nav-main -->
                </div><!-- end nav-container -->
            </div><!-- end header -->
       
        </div><!-- end container -->
		</div><!-- end wrapper-header --> 
        
        <div id="wrapper-content">
        <div class="container">
			<div id="content">
        	<div id="main">
            	<div id="maincontent" class="full">
           			<h1 class="pagetitle">Elements</h1>
 <div class="one_half firstcols">
                    <h4>Images in Paragraph</h4>
                    <p><div class="imgframe"><img class="alignleft" src="images/content/pf/pf4-2.jpg" alt="" /></div>Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Sed placerat libero quis metus malesuada venenatis. Nulla facilisi.</p>
                    <p>Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.laoreet molestie. Nulla facilisi. Duis condimentum molestie lacus ac tincidunt.Morbi a eros sed nisi laoreet molestie. Sed placerat libero quis metus malesuada venenatis. Proin vulputate, ligula id pellentesque laoreet, arcu odio tincidunt nunc, in dictum leo dui sed sapien. Cras rhoncus odio quis risus porta ullamcorper adipiscing nulla sodales.</p>
                    <p>Morbi a eros sed nisi laoreet molestie. Nulla facilisi. Duis condimentum molestie lacus ac tincidunt. Cras rhoncus odio quis risus porta ullamcorper adipiscing nulla sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in metus ligula, et ullamcorper odio. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo.</p>
                </div>
                <div class="one_half lastcols">
                    <h4>Tables</h4>
                    <table>
                    <tbody>
                    <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th>Header 3</th>
                    </tr>
                    <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    </tr>
                    <tr class="even">
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    </tr>
                    <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    </tr>
                    <tr class="even">
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    </tr>
                    <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    </tr>
                    <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    </tr>
                    <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    </tr>
                    <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    </tr>
                    <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    </tr>
                    <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    </tr>
                    </tbody>
                    </table>
                </div>
                
                <div class="separator line"></div>
                
                <div class="one_half firstcols">
                <h1>This is H1 tag</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed. Nunc quam nunc, auctor id fringilla ut, faucibus euismod felis. Phasellus in est diam. Ut dolor neque, luctus ut laoreet non, dictum non diam. Donec lectus tortor, facilisis et dignissim vel, fringilla nec magna.</p>
                </div>
                <div class="one_half lastcols">
                <h2>This is H2 tag</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed. Nunc quam nunc, auctor id fringilla ut, faucibus euismod felis. Phasellus in est diam. Ut dolor neque, luctus ut laoreet non, dictum non diam. Donec lectus tortor, facilisis et dignissim vel, fringilla nec magna.</p>
                </div>
                
                <div class="separator"></div>
                
                <div class="one_third firstcols">
                <h3>This is H3 tag</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed. Nunc quam nunc, auctor id fringilla ut, faucibus euismod felis. Phasellus in est diam. Ut dolor neque, luctus ut laoreet non, dictum non diam.</p>
                </div>
                <div class="one_third ">
                <h4>This is H4 tag</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed. Nunc quam nunc, auctor id fringilla ut, faucibus euismod felis. Phasellus in est diam. Ut dolor neque, luctus ut laoreet non, dictum non diam.</p>
                </div>
                <div class="one_third lastcols">
                <h5>This is H5 tag</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed. Nunc quam nunc, auctor id fringilla ut, faucibus euismod felis. Phasellus in est diam. Ut dolor neque, luctus ut laoreet non, dictum non diam.</p>
                </div>
                
                <div class="separator"></div>
                
                <div class="one_fourth firstcols">
                <h5>Content with dropcaps</h5>
                <p><span class="dropcap1">A</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed.</p>
                </div>
                <div class="one_fourth ">
                <h5>Content with dropcaps</h5>
                <p><span class="dropcap1">B</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed.</p>
                </div>
                <div class="one_fourth ">
                <h5>Content with dropcaps</h5>
                <p><span class="dropcap1">C</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed.</p>
                </div>
                <div class="one_fourth lastcols">
                <h5>Content with dropcaps</h5>
                <p><span class="dropcap1">D</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed.</p>
                </div>
                
                <div class="separator line"></div>
                
                <h4>Dropcaps</h4>
                <p><span class="dropcap1">A</span>orem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. This is a blockquote. Aenean arcu elit, tristique semper pulvinar adipiscing. Donec faucibus. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. This is a blockquote. Aenean arcu elit, tristique semper pulvinar adipiscing. Donec faucibus. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
               
               <div class="separator line"></div>
               
                <div class="one_half firstcols">
                    <h4>jQuery  Tabs</h4>
                    <div class="tabcontainer">
                        <ul class="tabs">
                            <li><a href="#tab0">Tab1</a></li>
                            <li><a href="#tab1">Tab2</a></li>
                            <li><a href="#tab2">Tab3</a></li>
                        </ul>
                        <div id="tab-body">
                        <div id="tab0" class="tab-content">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor placerat mi. Aliquam malesuada, felis eget auctor euismod, lacus tellus vulputate turpis.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat rutrum luctus. Proin nisl augue, tempus quis lacinia at, ultrices eget sapien. Vestibulum at orci a eros molestie rutrum. Fusce interdum erat vel eros elementum vitae interdum massa varius. Morbi fermentum commodo nisi, id interdum mauris suscipit pellentesque. Morbi velit eros, accumsan ut faucibus at, viverra id mi. Nunc augue nisl, rutrum vitae luctus nec, lobortis sit amet diam.
                        </div>
                        <div id="tab1" class="tab-content">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat rutrum luctus. Proin nisl augue, tempus quis lacinia at, ultrices eget sapien. Vestibulum at orci a eros molestie rutrum. Fusce interdum erat vel eros elementum vitae interdum massa varius. Morbi fermentum commodo nisi, id interdum mauris suscipit pellentesque. Morbi velit eros, accumsan ut faucibus at, viverra id mi. Nunc augue nisl, rutrum vitae luctus nec, lobortis sit amet diam. Proin porttitor semper sollicitudin. Donec mollis rhoncus turpis et rhoncus. In elit nisl, ultrices id mollis ut, dapibus eget nulla. Fusce laoreet neque ut purus faucibus ut condimentum purus condimentum. Vestibulum vel magna ligula, in tincidunt augue. Fusce sit amet neque ut neque vestibulum rhoncus in eu nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer interdum sapien facilisis odio fermentum tincidunt. Nullam a ante augue.
                        </div>
                        <div id="tab2" class="tab-content">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat rutrum luctus. Proin nisl augue, tempus quis lacinia at, ultrices eget sapien. Vestibulum at orci a eros molestie rutrum. Fusce interdum erat vel eros elementum vitae interdum massa varius. Morbi fermentum commodo nisi, id interdum mauris suscipit pellentesque. Morbi velit eros, accumsan ut faucibus at, viverra id mi. Nunc augue nisl, rutrum vitae luctus nec, lobortis sit amet diam. Proin porttitor semper sollicitudin. Donec mollis rhoncus turpis et rhoncus. In elit nisl, ultrices id mollis ut, dapibus eget nulla. Morbi nec magna erat, id tincidunt sapien. Morbi id porttitor lorem. In mi velit, viverra a congue et, congue sit amet nibh. Pellentesque a libero eget quam consequat condimentum eu eu est. Vestibulum at tellus eget massa accumsan volutpat. Suspendisse felis arcu, sagittis nec ultrices sit amet, faucibus a ante. Nunc et ante at ipsum iaculis porta eu quis augue. Praesent ultrices suscipit quam, vitae malesuada erat volutpat non. Sed ut tortor turpis, eu dignissim elit.</div>
                        </div>
                    </div>
                </div>
                <div class="one_half lastcols">
                <h4>jQuery  Toggle</h4>
                <div id="toggle">
                    <h2 class="trigger"><span>Excepteur sint occaecat</span></h2>
                    <div class="toggle_container">
                    <div class="block">
                    <h3>Need a Website?</h3>
                    <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</p>
                    <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.</p>
                    </div>
                    </div>
                    
                              
                    <h2 class="trigger"><span>Maecenas et lacus est, et congue velit</span></h2>
                    <div class="toggle_container">
                    <div class="block">
                    <h3>Need a Logo?</h3>
                    <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</p>
                    <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.</p>
                    </div>
                    </div>
                    
                    <h2 class="trigger"><span>Sed lobortis massa id magna</span></h2>
                    <div class="toggle_container">
                    <div class="block">
                    <h3>Need to be Heard?</h3>
                    <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</p>
                    <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.</p>
                    </div>
                    </div>
                    
                    <h2 class="trigger"><span>Maecenas ultrices odio a orci dapibus</span></h2>
                    <div class="toggle_container">
                    <div class="block">
                    <h3>Have Product to Sell?</h3>
                    <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</p>
                    <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.</p>
                    </div>
                    </div>
                    </div>
                </div>
                
				<div class="clear"></div><br/>
                <div class="separator line"></div>
                
                <h4>Pullquotes &amp; Blockquotes</h4>
                <span class="pullquote-right">This is a pullquote right. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. </span>
                <p>This is a blockquote. Donec iaculis mollis mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Nullam dignissim convallis est.</p>
                <p>Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
                <span class="pullquote-left">This is pullquote left. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</span>
                <p>Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
                <p>Vivamus placerat cursus lorem, id mollis enim cursus quis. Pellentesque ac tortor ac quam hendrerit pharetra. Integer turpis eros, vulputate et pellentesque rhoncus, tincidunt sodales est. Aliquam volutpat egestas leo vitae pretium. Sed et urna nisi, aliquet faucibus magna.</p>
                <blockquote><div>This is Blockquote. Sed iaculis, purus quis imperdiet laoreet, dui arcu vulputate urna, non molestie enim tellus a metus. Pellentesque ac tortor ac quam hendrerit pharetra.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.</div>
                </blockquote>
                <p>Vivamus placerat cursus lorem, id mollis enim cursus quis. Pellentesque ac tortor ac quam hendrerit pharetra. Integer turpis eros, vulputate et pellentesque rhoncus, tincidunt sodales est. Aliquam volutpat egestas leo vitae pretium. Sed et urna nisi, aliquet faucibus magna.</p>

				<div class="separator line"></div>
                <h4>Highlight Text</h4>
                
                <p><span class="highlight1">This is a highlight1 span class</span> Quisque gravida porttitor sodales. Mauris odio orci, vestibulum quis condimentum ac, vestibulum quis ipsum. Vivamus vulputate, metus non pulvinar commodo, enim odio tincidunt nunc, vel luctus mauris massa aliquet magna. Morbi eros enim, tempor scelerisque dignissim id, hendrerit pulvinar tortor.</p>
<p>Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. <span class="highlight2">This is a highlight2 span class.</span> tincidunt nec, gravida vehicula, nisl. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
                
                    
                    <div class="clear"></div><!-- clear float -->
                </div><!-- end maincontent -->
                <div class="clear"></div><!-- clear float --> 
            </div><!-- end main -->
		</div><!-- end content -->
        </div><!-- end container -->
		</div><!-- end wrapper-content -->
        
        <div id="wrapper-footer">
        <div class="container">
            <div id="footer">
                <div id="main-footer">
                    <div class="footcol1">
                    <ul>
                        <li class="widget-container">
                            <h2 class="widget-title">Account</h2>
                            <ul>
                                <li><a href="#">Your Account</a></li>
                                <li><a href="#">Personal Information</a></li>
                                <li><a href="#">Addresses</a></li>
                                <li><a href="#">Order History</a></li>
                                <li><a href="#">Discount</a></li>
                            </ul>
                        </li>
                    </ul>
                    </div>
                    <div class="footcol2">
                        <ul>
                            <li class="widget-container">
                                <h2 class="widget-title">Our Hotel</h2>
                                <ul>
                                    <li><a href="#">New Product</a></li>
                                    <li><a href="#">Special Rooms</a></li>
                                    <li><a href="#">Guaranteed room availability</a></li>
                                    <li><a href="#">Complimentary Internet access</a></li>
                                    <li><a href="#">Suppliers</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="footcol3">
                        <ul>
                            <li class="widget-container">
                                <h2 class="widget-title">Promotion</h2>
                                <ul>
                                    <li><a href="#">Gift Cards</a></li>
                                    <li><a href="#">Delivery</a></li>
                                    <li><a href="#">Extended Service Plan</a></li>
                                    <li><a href="#">Customer Service</a></li>
                                    <li><a href="#">Returns</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="footcol4">
                    <ul>
                        <li class="widget-container">
                            <h2 class="widget-title">Information</h2>
                            <ul>
                                <li><a href="#">Search Terms</a></li>
                                <li><a href="#">Mobile</a></li>
                                <li><a href="#">Contact Us</a></li>
                                <li><a href="#">Advanced Service</a></li>
                                <li><a href="#">Site Map</a></li>
                            </ul>
                        </li>
                    </ul>
                    </div>
                    <div class="clear"></div>
                </div><!-- end main-footer -->
            </div><!-- end footer -->
        </div><!-- end container -->
        </div><!-- end wrapper-footer -->
           
        <div id="after-footer">
        <div class="container">
            <div id="copyright">
            Copyright &copy;2012 Queen Hotel. All Rights Reserved. Theme design by	<a href="http://templatesquare.com/" title="">
            TemplateSquare.com</a>
            </div>
            <div class="clear"></div>
        </div><!-- end container -->
        </div><!-- end after-footer -->
        

</div><!-- end outer-container -->
		
</body>

</html>
